import React, { useEffect, useState, useRef } from "react";
import { rectAttribute, propsType } from "./dto";
import turnLeft from "@/assets/turn-left.svg";
import turnRight from "@/assets/turn-right.svg";
import "./index.css";

const ScrollView = (props: propsType) => {
  const { children, stepLength = 300 } = props;
  const [distance, setDistance] = useState(0);
  const [visible, setVisible] = useState(false);
  // 视口容器
  const viewBox = useRef();
  // 滑动容器
  const scrollBox = useRef();

  const handleTransform = (type: string) => {
    // 视口容器属性
    const viewBoxWidthAttribute: rectAttribute =
      viewBox.current && viewBox.current.getBoundingClientRect();
    // 滑动容器属性
    const scrollBoxAttribute: rectAttribute =
      scrollBox.current && scrollBox.current.getBoundingClientRect();
    // 滑动终点
    let _distance = distance;
    // 判断是否支持滑动
    if (scrollBoxAttribute.width < viewBoxWidthAttribute.width) {
      return;
    } else {
      // 判断滑块是否支持向右滑动
      if (scrollBoxAttribute.x < viewBoxWidthAttribute.x) {
        if (type === "left") {
          _distance = distance + stepLength;
          if (_distance > viewBoxWidthAttribute.x) {
            _distance = 0;
          }
          scrollBox.current.style.transform = `translateX(${_distance}px)`;
          setDistance(_distance);
        }
      }
      // 判断滑块是否支持向左滑动
      if (scrollBoxAttribute.right > viewBoxWidthAttribute.right) {
        if (type === "right") {
          _distance = distance - stepLength;
          if (
            scrollBoxAttribute.right + _distance <
            viewBoxWidthAttribute.right
          ) {
            _distance =
              0 - scrollBoxAttribute.width + viewBoxWidthAttribute.width;
          }
          scrollBox.current.style.transform = `translateX(${_distance}px)`;
          setDistance(_distance);
        }
      }
    }
  };

  const resetVisible = () => {
    const viewBoxWidthAttribute: rectAttribute =
      viewBox.current && viewBox.current.getBoundingClientRect();
    // 滑动容器属性
    const scrollBoxAttribute: rectAttribute =
      scrollBox.current && scrollBox.current.getBoundingClientRect();
    if (scrollBoxAttribute?.width > viewBoxWidthAttribute?.width) {
      setVisible(true);
      return;
    }
    setVisible(false);
  };

  useEffect(() => {
    resetVisible();
    window.addEventListener("resize", resetVisible);
    return () => {
      window.removeEventListener("resize", resetVisible);
    };
  }, []);

  return (
    <div className="container">
      {visible && (
        <>
          <div
            onClick={() => handleTransform("left")}
            className="arrow arrow_left"
          >
            <img src={turnLeft} alt="" />
          </div>
          <div
            onClick={() => handleTransform("right")}
            className="arrow arrow_right"
          >
            <img src={turnRight} alt="" />
          </div>
        </>
      )}
      <div ref={viewBox} className="view_box" id="view_box">
        {/* 滑动容器 */}
        <div ref={scrollBox} className="scroll_box" id="scroll_box">
          {children}
        </div>
      </div>
    </div>
  );
};

export default ScrollView;
